<div class="header flex ">
    <img src="assets/images/left.png" alt="" class="header_img">
    <div class="header_cut"></div>
    <div class="header_title">这里是设备名称</div>
    <div class="header_button">设备配置</div>
</div>
<div class="background flex flex_column flex_1">
    <!--上部选项卡-->
    <div class="bg_white flex module">
        <nz-tabset>
            <nz-tab nzTitle="基本信息">

            </nz-tab>
            <nz-tab nzTitle="应用详情">

            </nz-tab>
        </nz-tabset>
    </div>
    <div class="bg_white device_module ">
        <div class="refresh_div">
            <img src="assets/images/icon_refresh.png" class="refresh_img" />
        </div>
        <nz-input-group [nzSuffix]="suffixIconSearch" class="searchinput">
            <input type="text" nz-input placeholder="Search" />
        </nz-input-group>
        <ng-template #suffixIconSearch>
            <i nz-icon nzType="search"></i>
        </ng-template>
        <nz-table #smallTable nzSize="small" [nzData]="listOfData" class="table">
            <thead>
                <tr class="thead_font">
                    <th nzWidth="22%">AI应用名称</th>
                    <th nzWidth="19%">状态</th>
                    <th nzWidth="17%">实例功能</th>
                    <th nzWidth="19%">到期时间</th>
                    <th nzWidth="23%">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of smallTable.data" class="tbody_font">
                    <td>{{ data.project_name }}</td>
                    <td>
                        <span *ngIf="data.state === '可用'" class="small_circle" style="background:#5DD4AF;"></span>
                        <span *ngIf="data.state === '异常'" class="small_circle" style="background:#F66F6A;"></span>
                        <span *ngIf="data.state === '停用'" class="small_circle" style="background: #999999;"></span> {{ data.state }}

                    </td>
                    <td>{{ data.apiurl }}</td>
                    <td>{{ data.call }}</td>
                    <td>{{ data.describe }}</td>
                    <td *ngIf="data.state !== '重启中'">
                        <a>查看监控</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a *ngIf="data.state === '可用'">停用</a>
                        <a *ngIf="data.state === '异常'">重启</a>
                        <a *ngIf="data.state === '停用'||data.state === '重启中'">启用</a>

                        <nz-divider nzType="vertical"></nz-divider>
                        <a>调用指南</a>
                        <nz-divider nzType="vertical"></nz-divider>
                    </td>
                    <td *ngIf="data.state === '重启中'" class="restart_span">
                        <span>查看监控</span>
                        <nz-divider nzType="vertical"></nz-divider>
                        <span>启用</span>
                        <nz-divider nzType="vertical"></nz-divider>
                        <span>调用指南</span>
                        <nz-divider nzType="vertical"></nz-divider>
                    </td>
                </tr>
            </tbody>
        </nz-table>

    </div>
</div>